function login() {
    var box = document.querySelector('.box')
    var ol = document.querySelector('.box ol')
    var ulis = document.querySelectorAll('.box ul li')
    var olis = document.querySelectorAll('.box ol li')
    // console.log(box,ulis,olis);
    for (let i = 0; i < ulis.length - 1; i++) {
        ulis[i].onmouseover = function () {
            for (let j = 0; j < ulis.length - 1; j++) {
                ulis[j].className = ''
                olis[j].className = ''
                ol.className = ''
            }
            getStyle(box, 'height')
            // console.dir(box);
            ulis[i].className = 'active'
            olis[i].className = 'active'
            ol.className = 'active'
        }
        box.onmouseout = function () {
            ulis[i].className = ''
            olis[i].className = ''
            ol.className = ''
        }
    }
    
    var form = document.querySelector('form')
    var username = document.querySelector('[name="username"]')
    var password = document.querySelector('[name="password"]')
    var control = document.querySelector('#login_control')
    control.onclick = function () {
        var usernameInput = document.querySelector('[name="username"]').value
        var passwordInput = document.querySelector('[name="password"]').value

        if (username.value == "") {

            alert("请输入用户名");

        } else if (password.value == "") {

            alert("请输入密码");

        }
        var reg = /^[a-zA-Z][a-zA-Z0-9]{2,9}$/
        if (!reg.test(usernameInput)) {
            alert("用户名不符合规范")
            return false;
        }
        var reg1 = /^[a-zA-Z0-9]{6,12}$/
        var reg2 = /[A-Z]/
        var reg3 = /[a-z]/
        var reg4 = /\d/
        if (!reg1.test(passwordInput) || !reg2.test(passwordInput) || !reg3.test(passwordInput) || !reg4.test(passwordInput)) {
            alert('密码不符合规范')
            return false;
        }
        var xhr = new XMLHttpRequest;
        xhr.open('post', 'http://localhost:8888/users/login')
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
        console.log(usernameInput,passwordInput);
        console.log(username,password);
        xhr.send(`username=${usernameInput}&password=${passwordInput}`)
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                if(xhr.status>=200 && xhr.status<300){
                    var res = xhr.responseText;
                    console.log(res);
                    res = JSON.parse(res)
                    console.log(res);
                    var {code,message,token,user} = res;
                    alert(message)
                    if(code === 1){
                        var {id} = user;

                        // console.log(token,id);
                        // location.href = `home.html?token=${token}&id=${id}`
                        localStorage.setItem('token',token)
                        localStorage.setItem('id',id)
                        location.href = `home.html`
                    }
                }
            }
        }

    }

}